<template>
  <div class="profit-loss-container">
 

    <!-- 操作按钮 -->
    <div class="action-buttons">
       <el-button type="success" @click="handleAdd">新增</el-button>
      <el-button @click="handleRefresh">刷新</el-button>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
      <el-table 
        :data="tableData" 
        style="width: 100%;" 
        v-loading="loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="enterCode" label="入库单号" width="180" />
        <el-table-column prop="enterType" label="入库类型" width="120">
          <template #default="scope">
            <el-tag 
              :type="getEnterTypeTag(scope.row.enterType)"
              size="small"
            >
              {{ getEnterTypeText(scope.row.enterType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="depotId" label="仓库编号" width="100" />
        <el-table-column prop="depotName" label="仓库名称" width="120" />
        <el-table-column prop="enterDate" label="入库日期" width="200">
          <template #default="scope">
            {{ moment(scope.row.enterDate).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column prop="description" label="备注" width="200"/>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.PageIndex"
        v-model:page-size="pagination.PageSize"
        :total="pagination.totalCount"
        :page-sizes="[15, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import PurSale from '@/http/PurSale'
import { ElMessage, ElMessageBox } from 'element-plus'
import moment from 'moment'
import http from '@/http/axiosHelper'
const router = useRouter()

// 分页数据
const pagination = reactive({
  PageIndex: 1,
  PageSize: 15,
  totalCount: 0,
  totalPage: 0
})

// 表格数据
const tableData = ref<any[]>([])
const loading = ref(false)
const selectedRows = ref<any[]>([])



// 获取入库类型标签类型
const getEnterTypeTag = (enterType: number) => {
  switch (enterType) {
    case 1:
      return '1'
    case 2:
      return '2'
    default:
      return 'info'
  }
}

// 获取入库类型文本
const getEnterTypeText = (enterType: number) => {
  switch (enterType) {
    case 1:
      return '盘盈入库'
    case 2:
      return '盘亏入库'
    default:
      return '未知'
  }
}



// 搜索方法
const handleSearch = async () => {
  loading.value = true
  try {
 
    
    try {
      const response = await http.get('/scmreadconsul/api/Check/ShowProfitLoss')
      
      if (response.data.code === 200) {
        tableData.value = response.data.items || []
        pagination.totalCount = response.data.totalCount || 0
        pagination.totalPage = response.data.totalPage || 0
        ElMessage.success('查询成功')
      } else {
        ElMessage.error(response.data.msg || '查询失败')
      }
    } catch (apiError) {
      console.error('API调用失败:', apiError)
      // 如果API调用失败，使用模拟数据
 
      pagination.totalCount = 100
      pagination.totalPage = 10
      ElMessage.warning('使用模拟数据，API接口暂时不可用')
    }
  } catch (error) {
    console.error('查询失败:', error)
    ElMessage.error('查询失败，请稍后重试')
  } finally {
    loading.value = false
  }
}





// 新增
const handleAdd = () => {
  router.push('/addprofitloss')
}





// 刷新数据
const handleRefresh = () => {
  handleSearch()
}

// 分页大小改变
const handleSizeChange = (size: number) => {
  pagination.PageSize = size
  pagination.PageIndex = 1
  handleSearch()
}

// 当前页改变
const handleCurrentChange = (page: number) => {
  pagination.PageIndex = page
  handleSearch()
}

// 选择行变化
const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection
}

// 组件挂载时加载数据
onMounted(() => {
  handleSearch()
})
</script>

<style scoped>
.profit-loss-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.search-form {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-buttons {
  background-color: white;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table-container {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination-container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  justify-content: flex-end;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-form-item {
  margin-bottom: 15px;
}

.el-button {
  margin-right: 10px;
}

.el-table {
  margin-top: 10px;
}

.no-data {
  color: #909399;
  font-style: italic;
}

/* 入库类型标签样式 */
.el-tag--success {
  background-color: #f0f9ff;
  border-color: #67c23a;
  color: #67c23a;
}

.el-tag--warning {
  background-color: #fdf6ec;
  border-color: #e6a23c;
  color: #e6a23c;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profit-loss-container {
    padding: 10px;
  }
  
  .search-form .el-form-item {
    margin-bottom: 10px;
  }
  
  .action-buttons .el-button {
    margin-bottom: 5px;
  }
}
</style>
